<script type="text/javascript" >
    stFacebookToolbox.load_tooltip();
    stFacebookToolbox.on_submitform('#settingForm');
    jQuery( "#sortable" ).sortable();
    jQuery( "#sortable" ).disableSelection();
    jQuery('#color').colorPicker();
    jQuery('.color').colorPicker();
</script>

<div class="w100p bgl">
    <div class="w100p bgr p5b">
            <div class="w100p bgr">
              <div class="p15l p25t">
                  
              	<div class="float_left m20r" >
                    <div class="w430 mc p10b p10t" id="form_properties" onclick='jQuery("#edit_form").slideUp();jQuery("#list_button").slideUp();jQuery("#properties_edit").slideDown();jQuery("#form_style").slideUp();'>
                        <label style="font-size:150%">Untitled Form</label>
                        <p>This is your form description. Click here to edit.</p>
                        </div>
                    <div id="sortable">
                	 <div class="w465 b1px m15b po" id="show_error">
                    	<div class="w430 mc p10b p10t">
                        <label style="color:#CD4224 !important;font-size:150%">You have no fields yet!</label>
                        <p>Click the buttons on the right to add fields to your form.</p>
                        </div>
                    </div>
                </div>
                    <div onclick="stFacebookToolboxcustom.save_form();" style="display:none;" id="save_form"> <a href="javascript:void(0);"><img alt="" src="<?php echo $config['pluginPath'];?>images/n_save_form_but.png"></a></div>
                </div>

     

                <div class="w360 b1px float_left" id="list_button">
           	  <div class="conca">
                    	<ul>
                        	<li><a class="ncurr" href="javascript:void(0);" onclick='jQuery("#properties_edit").slideUp();jQuery("#edit_form").slideUp();jQuery("#list_button").slideDown();jQuery("#form_style").slideUp();'>Add a Field </a></li>
                                <li><a href="javascript:void(0);" onclick="stFacebookToolboxcustom.edit_element(jQuery('#last_edit').val(), jQuery('#type_'+jQuery('#last_edit').val()).val());jQuery('#form_style').slideUp();">Field Properties</a></li>
                            <li style=""><a href="javascript:void(0);" onclick='jQuery("#edit_form").slideUp();jQuery("#list_button").slideUp();jQuery("#properties_edit").slideDown();jQuery("#form_style").slideUp();'>Form Properties</a></li>
                            <li style="background:none;"><a href="javascript:void(0);" onclick='jQuery("#edit_form").slideUp();jQuery("#list_button").slideUp();jQuery("#properties_edit").slideUp();jQuery("#form_style").slideDown();'>Form Style</a></li>
                            </ul>
                        <div class="cl"></div>
                    </div>
                    <div class="bg_under_menu">
                    	<p>Click to add a Field</p>
                    </div>
                    <input type="hidden" id="base_url" value="<?php echo $config['pluginPath'];?>" />
                    <input type="hidden" id="count" value="0" />
                    <div class="p10t p10b">
                    	<div class="w326 mc">
                        	<ul>
                            	<li><a class="n_bg1" href="javascript:stFacebookToolboxcustom.insert_element('text')">Single Line Text</a></li>
                                <li><a class="n_bg3" href="javascript:stFacebookToolboxcustom.insert_element('textarea');">Paragraph Text</a></li>
                                <li><a class="n_bg5" href="javascript:stFacebookToolboxcustom.insert_element('radio');">Single Choice</a></li>
                                <li><a class="n_bg4" href="javascript:stFacebookToolboxcustom.insert_element('checkbox');">Checkboxes</a></li>
                                <li><a class="n_bg6" href="javascript:stFacebookToolboxcustom.insert_element('select');">Dropdown</a></li>
                                <li><a class="n_bg5" href="javascript:stFacebookToolboxcustom.insert_element('option');">Multiple Matrix</a></li>
                                <li><a class="n_bg1" href="javascript:stFacebookToolboxcustom.insert_element('break');">Section Break</a></li>
                               </ul>
                            <div class="cl"></div>
                        </div>
                    </div>
                </div>
                  <div class="w360 b1px float_left" id="form_style" style="display:none;">
           	  <div class="conca">
                    	<ul>
                        	<li><a  href="javascript:void(0);" onclick='jQuery("#properties_edit").slideUp();jQuery("#edit_form").slideUp();jQuery("#list_button").slideDown();jQuery("#form_style").slideUp();'>Add a Field </a></li>
                                <li><a href="javascript:void(0);" onclick="stFacebookToolboxcustom.edit_element(jQuery('#last_edit').val(), jQuery('#type_'+jQuery('#last_edit').val()).val());jQuery('#form_style').slideUp();">Field Properties</a></li>
                            <li style=""><a href="javascript:void(0);" onclick='jQuery("#edit_form").slideUp();jQuery("#list_button").slideUp();jQuery("#properties_edit").slideDown();jQuery("#form_style").slideUp();'>Form Properties</a></li>
                           <li style="background:none;"><a class="ncurr"  href="javascript:void(0);" onclick='jQuery("#edit_form").slideUp();jQuery("#list_button").slideUp();jQuery("#properties_edit").slideUp();jQuery("#form_style").slideDown();'>Form Style</a></li>
                            </ul>
                        <div class="cl"></div>
                    </div>
                    <div class="p10t p10b">
                    	<div class="">
                        	<ul style="">
                   <li>
                        Background color 
                        <input  name="data[flagcolorcode]" id="background_color_setting" class="color" type="text" value="" style="width: 280px;" />
                    </li>
                    <li>
                        Form Title Color
                        <input  name="data[flagcolorcode]" id="color" type="text" value="#000080" style="width: 280px;" />
                    </li>
                    <li>
                        Form text color
                        <input  name="data[flagcolorcode]" id="text_color_setting" class="color" type="text" value="#000000" style="width: 280px;" />
                    </li>
                    <li>
                        Submit button background color
                        <input  name="data[flagcolorcode]" id="submit_button_color" class="color" type="text" value="#FFFFFF" style="width: 280px;" />
                    </li>
                    <li>
                        Submit button text color
                        <input  name="data[flagcolorcode]" id="submit_button_text_color" class="color" type="text" value="#000000" style="width: 280px;" />
                    </li>
                    <li>
                        Font type
                        <select name="font_type" id="font_type"  style="width:300px;" onchange="stFacebookToolboxcustom.change_font(this.value);">
                            <option value="">Standard</option>
                            <?php foreach(explode('|',$config['font']) as $font):?>
                            <option value="<?php echo str_replace('+',' ',$font); ?>" style=" font-family: '<?php echo str_replace('+',' ',$font); ?>', serif;"><?php echo str_replace('+',' ',$font); ?></option>
                            <?php endforeach;?>
                        </select>
                    </li>
                     <li>
                        Title font size <br />
                        <input type="text" id="title_font_size" style="width:80%" value="24" onkeyup="">
                    </li>
                     <li>
                        Text font size <br />
                        <input type="text" id="text_font_size" style="width:80%" value="14" onkeyup="">
                    </li>
                    <li>
                        Submit font size <br />
                        <input type="text" id="submit_font_size" style="width:80%" value="14" onkeyup="">
                    </li>
                 </ul>
                            <div class="cl"></div>
                        </div>
                    </div>
                </div>
                  <div class="w360 b1px float_left" id="properties_edit" style="display:none;">
           	  <div class="conca">
                    	<ul>
                        	<li><a  href="javascript:void(0);" onclick='jQuery("#properties_edit").slideUp();jQuery("#edit_form").slideUp();jQuery("#list_button").slideDown();jQuery("#form_style").slideUp();'>Add a Field </a></li>
                            <li><a href="javascript:void(0);" onclick="stFacebookToolboxcustom.edit_element(jQuery('#last_edit').val(), jQuery('#type_'+jQuery('#last_edit').val()).val());jQuery('#form_style').slideUp();" >Field Properties</a></li>
                            <li style="" ><a href="javascript:void(0);" class="ncurr" onclick='jQuery("#edit_form").slideUp();jQuery("#list_button").slideUp();jQuery("#properties_edit").slideDown();jQuery("#form_style").slideUp();'>Form Properties</a></li>
                            <li style="background:none;"><a href="javascript:void(0);" onclick='jQuery("#edit_form").slideUp();jQuery("#list_button").slideUp();jQuery("#properties_edit").slideUp();jQuery("#form_style").slideDown();'>Form Style</a></li>
                            
                            </ul>
                        <div class="cl"></div>
                    </div>
                    <div class="p10t p10b">
                    	<div class="">
                        	<ul style="">
                    <li>
                        Form Title <br />
                        <input type="text" id="form_title" style="width:80%" value="Untitled Form" onkeyup="jQuery('#form_properties label').html(this.value);">
                    </li>
                    <li>
                        Description <br />
                    <textarea style="width: 357px;" rows="10" cols="50" id="form_description"onkeyup="jQuery('#form_properties p').html(this.value.replace(/\n/gi,'<br>'));"></textarea></li>
                    <li>
                        Facebook Page
                        <select name="page_id" id="page_id"  style="width:267px;">
                            <option value="">Not assigned </option>
                            <?php foreach($page as $row):?>
                            <option value="<?php echo $row->pageid;?>"><?php echo $row->pagename;?>
                           <?php endforeach;?>
                        </select><input type="button" style="background-color:#3B5998;color:#FFF;font-weight: bold;border:none;cursor:pointer;" value="Add form to facebook page" onclick="window.open('http://www.facebook.com/add.php?api_key=135432083196429&pages=1&page='+jQuery('#page_id').val());"/>
                    </li>
                    <li>
                        Email Template
                        <select name="email_style" id="email_style"  style="width:268px;">
                            <option value="1">Template 1</option>
                            <option value="2">Template 2</option>
                        </select>
                    </li>
                    <li>
                        Use captcha
                        <input type="checkbox" name="has_captcha" id="has_captcha"  style="margin-left: 16px;" onclick="if(this.checked){jQuery('#has_captcha').val(1)}else {jQuery('#has_captcha').val(0)}" />
                        <input type="hidden" name="has_captcha" id="has_captcha" value="0" />
                    </li>
                    <li>
                        Notification email <br />
                        <input type="text" name="form_email" id="form_email" style="width: 80%" />
                    </li>
                    <li>
                        Submit button label <br />
                        <input type="text" name="button_label" id="button_label" value="" style="width: 80%" />
                    </li>
                    <li>
                        Message when form is submitted <br />
                        <input type="radio" name="success" style="margin-left: 71px;" checked onclick="jQuery('#form_success_message').slideDown();jQuery('#properties_edit input.url').slideUp();">Show Text&nbsp;&nbsp;<input type="radio" name="success" onclick="jQuery('#properties_edit input.url').slideDown();jQuery('#form_success_message').slideUp();">Redirect URL
                    </li>
                    <textarea cols="50" rows="10" style="width: 357px;" id="form_success_message">Your submission is successfully received and stored</textarea>
                    <br />
                    <input type="text" class="url width_medium" style="display:none;" value="http://" />
                 </ul>
                            <div class="cl"></div>
                        </div>
                    </div>
                </div>
                  <div class="w360 b1px float_left" id="edit_form" style="display:none;">
           	  <div class="conca">
                    	<ul>
                        	<li><a href="javascript:void(0);" onclick='jQuery("#properties_edit").slideUp();jQuery("#edit_form").slideUp();jQuery("#list_button").slideDown();'>Add a Field </a></li>
                            <li ><a class="ncurr"  href="javascript:void(0);" onclick="stFacebookToolboxcustom.edit_element(jQuery('#last_edit').val(), jQuery('#type_'+jQuery('#last_edit').val()).val());jQuery('#form_style').slideUp();">Field Properties</a></li>
                            <li style=""><a href="javascript:void(0);" onclick='jQuery("#edit_form").slideUp();jQuery("#list_button").slideUp();jQuery("#properties_edit").slideDown();jQuery("#form_style").slideUp();'>Form Properties</a></li>
                            <li style="background:none;"><a href="javascript:void(0);" onclick='jQuery("#edit_form").slideUp();jQuery("#list_button").slideUp();jQuery("#properties_edit").slideUp();jQuery("#form_style").slideDown();'>Form Style</a></li>
                            
                            </ul>
                        <div class="cl"></div>
                    </div>
                    <div class="bg_under_menu">
                        <input type="hidden" id="type" />
                        <input type="hidden" id="element_delete" />
                        <input type="hidden" id="option_delete" />
                        <input type="hidden" id="last_edit" value="1" />
                        <p><span id="edit_id" style="color: #ff2e00;font-size: 28pt;float:right;"></span></p>
                    </div>
                    <div class="p10t p10b">
                    	<div class="">
                        <ul style="">
                                    <li>
                                        Field Label <br />
                                        <textarea id="field_label" style="width:290px;" rows="5" onkeyup="jQuery('#title_'+jQuery('#edit_id').html()).html(this.value);" ></textarea>
                                    </li>
                                     <li id="horizontal">
                                        <input type="checkbox" id="horizontal_line" onclick="if(this.checked){jQuery('#break_'+jQuery('#edit_id').html()).val('1');}else{jQuery('#break_'+jQuery('#edit_id').html()).val('0');}"/>&nbsp;Add Horizontal line
                                    </li>
<!--                                    <li>
                                        Field Type <br />
                                        <select onchange="set_properties(JJ(this).val(), 'type')" tabindex="12" autocomplete="off" id="element_type" class="select full" style="width:51% !important;">
                                            <option value="text">Single Line Text</option>
                                            <option value="textarea">Paragraph Text</option>
                                            <option value="radio">Multiple Choice</option>
                                            <option value="checkbox">Checkboxes</option>
                                            <option value="select">Drop Down</option>
                                            <option value="number">Number</option>
                                            <option value="simple_name">Name</option>
                                            <option value="date">Date</option>
                                            <option value="time">Time</option>
                                            <option value="phone">Phone</option>
                                            <option value="money">Price</option>
                                            <option value="url">Web Site</option>
                                            <option value="email">Email</option>
                                            <option value="address">Address</option>
                                            <option value="file">File Upload</option>
                                            <option value="section">Section Break</option>
                                        </select>
                                    </li>-->
                                    <li id="display_field_size">
                                        
                                        Field Size <br />
                                        <select onchange="stFacebookToolboxcustom.set_size(this.value)" tabindex="13" autocomplete="off" id="field_size" class="select" style="width:290px;">
                                        <option value="small">Small</option>
                                        <option value="medium">Medium</option>
                                        <option value="large">Large</option>
                                        </select>
                                        
                                    </li>
                                    <li>
                                    <fieldset style="border: 1px solid #cccccc;padding-bottom: 10px;width:290px;" id="option_element">
                                        Choices <br />

                                    </fieldset>
                                    </li>
                                    <li id="">
                                        <fieldset style="border: 1px solid #cccccc;padding-bottom: 10px;width:290px;" id="option_element_column">
                                        </fieldset>
                                    </li>
                                    <li id="">
                                        <fieldset style="border: 1px solid #cccccc;padding-bottom: 10px;width:290px;" id="option_element_row">
                                    </li>
                                    <li id="display_rules">
                                        <fieldset style="border: 1px solid #cccccc;padding-bottom: 10px;width:290px;"><legend style="margin-left: 6px;">Rules</legend>
                                               <div style="margin-left: 35px; font-weight: lighter;"><input type="checkbox" id="require_checkbox" onclick="if(this.checked){jQuery('#require_title_'+jQuery('#edit_id').html()).html(' *')}else{jQuery('#require_title_'+jQuery('#edit_id').html()).html('')}">Required</div>

                                            <div style="margin-left: 35px; font-weight: lighter;" id="id_no_duplicates"><input type="checkbox">No Duplicates</div>
                                        </fieldset>
                                    </li>
                                    <li id="display_default_value_form">
                                        Default value <br />
                                        <input type="text" id="default_value" style="width:290px;" onkeyup="jQuery('#default_'+jQuery('#edit_id').html()).val(this.value);">
                                    </li>
                                    <li id="display_guidelines">
                                        Guidelines for User<br />
                                        <textarea style="width:290px;" rows="5"  id="element_guidelines" onkeyup="jQuery('#element_guidelines_'+jQuery('#edit_id').html()).val(this.value);"></textarea>
                                    </li>

                                </ul>
                            <div class="cl"></div>
                        </div>
                    </div>
                      <div class="p10t">
                  <a href="javascript:void(0);" onclick='jQuery("#properties_edit").slideUp();jQuery("#edit_form").slideUp();jQuery("#list_button").slideDown();'><img alt="" src="<?php echo $config['pluginPath'];?>images/n_add_button.png"></a>
                  </div>
                </div>
                <div class="cl"></div>
              </div>
            </div>

    </div>
</div>
<input type="hidden" id="default_id" value="<?php echo $default_id; ?>" />
